<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        *
        {
        	margin:0;padding: 0;
        }
        #goTop
        {
        	position: fixed;bottom:50px;right:50px;z-index: 100;background:url('images/top.png') no-repeat;width:200px;height:190px;display: none;
        }
        /*假如想要改为动图，只需在鼠标移到小火箭上时把背景图片替换为gif图片*/
        /*#goTop:hover
        {
            background:url('images/top.gif') no-repeat;   //找到图片即可
        }*/
        body
        {
        	height: 5000px;
        }
    </style>
</head>
<body>
	
	<div id="goTop"></div>
</body>
</html>
<script type="text/javascript">
	$(function(){
		//给window注册事件
		$(window).scroll(function() {
			//当向上卷曲的高度大于1000px时，显示小火箭，小于1000px时，隐藏小火箭
			if($(window).scrollTop() >= 1000)
			{
				$('#goTop').stop().fadeIn(1000);
			}
			else
			{
				$('#goTop').stop().fadeOut(1000);
			}
		});

		//给小火箭注册事件
		$('#goTop').click(function(){
			//点击小火箭，scrollTop回到0px的位置
			//$('html,body').stop().animate({scrollTop:0},1000);
			$(window).scrollTop(0);  //设置scrollTop为0
		});
	});

</script>